<template>
    <div class="geeTable">
        <el-table ref="geeTable"
                  :data="geeTableData"
                  style="margin:0 auto;">
            <!--max-height="400px">-->
            <el-table-column
                    prop="id"
                    label=""
                    width="30"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="任务名称"
                    width="fit-content"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="进度"
                    width="140"
                    align="center">
                <template slot-scope="scope">
                    <el-progress
                            :percentage="100"
                            status="success">
                            <!--:percentage="scope.row.progress|toNumber"-->
                            <!--:status="scope.row.status"-->
                    </el-progress>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            title="结果预览"
                            :disabled="scope.row.chart"
                            @click="previewData(scope.$index, scope.row)"
                            type="text">
                        <i class="fa fa-table"></i>
                    </el-button>
                    <el-button
                            title="结果上图"
                            :disabled="scope.row.map"
                            @click="openDataResourceOnMap(scope.$index, scope.row)"
                            type="text">
                        <i class="fa fa-globe"></i>
                    </el-button>
                    <el-button
                            title="结果下载"
                            :disabled="scope.row.download"
                            icon="el-icon-download"
                            @click="download(scope.$index, scope.row)"
                            type="text">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "geeTable",
        props:{
            tableData:Array,
        },
        data(){
          return{
              geeTableData:[],
          }
        },
        methods:{
            getTableData(data){
                let rowData = [];
                for(let i =0; i < data.length; i++){
                    let row={};
                    row.id = i+1;
                    row.remarks = data[i];
                    row.download = false;
                    row.chart = false;
                    row.map = false;
                    rowData.push(row);
                }
                this.geeTableData = rowData;
            },

        },
        watch:{
            tableData :function () {
                if(this.tableData!==[]){
                    this.getTableData(this.tableData);
                }
            }
        }
    }
</script>

<style>
    .el-input--prefix .el-input__inner {
        border-radius: 20px;
    }

    .el-table td, .el-table th {
        background-color: #f8f8f9;
    }

    .el-table__empty-block {
        background-color: #f8f8f9;
    }

    .el-el-table-column {
        text-align: center;
    }
    #deletepro:hover{
        color:#fe6970;
    }
</style>